<template>
    <div class="connentSty">

        <div class="center navInfo" v-show="id==5||id==6">
            <van-dropdown-menu active-color='#4873c1'>
                <van-dropdown-item v-model="index" :options="list" @change='getBrandIndex'/>
            </van-dropdown-menu>
        </div>
        <div class="pt20">
            <div v-show="articlelist.length>0">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    :finished-text="finishedTxt"
                    :immediate-check='false'
                    offset=20
                    @load="goPullup"
                    >
                    <div class="flex flexBetween alignCenter list relative" v-for="(item,index) in articlelist" :key="index" @click="goLink(item.id)">
                        <div class="topF flex">
                            <div class="flag colorBlue" v-if="id==5 || id == 6">{{item.category_child_name}} </div>
                            <img src="../../assets/image/enclosure1.png" v-if="item.has_file" class="relative" style="width:0.32rem;height:0.32rem;top:0.04rem"/>
                        </div>
                        <div>{{item.title}}</div>
                        <img :src="item.cover" />
                    </div>
                </van-list>
            </div>
            
            <van-empty image="search" v-show="articlelist.length==0" description="暂无数据" style="padding-top:2rem" />
        </div>
        
    </div>
</template>
<script>
import {Toast} from 'vant';
// import VConsole from 'vconsole'
// let vConsole=new VConsole()
export default {
    name:'sustainableList',
    data(){
        return {
            loading:true,
            finished:false,
            finishedTxt:'没有更多了',
            index:0,
            brandList: [
                { text: '全部', value: '' },
                { text: 'ELLASSAY 歌力思', value: 10 },
                { text: 'LAUREL', value: 11 },
                { text: 'Ed Hardy', value: 22 },
                { text: 'IRO Paris', value: 13},
                { text: 'self-portrait', value: 14},
            ],
            dynamicList:[
                { text: '全部', value: '' },
                { text: '可持续工坊', value: 8 },
                { text: '外部论坛', value: 9 },
            ],
            page:1,
            id:'',
            list:[],
            articlelist:[]
        }
    },
    created(){
        this.id=this.$route.query.id
        console.log('id',this.id)
        this.list=[]
        // if(this.id==5){
        //     this.list=this.dynamicList //可持续发展动态
        //     this.index=this.dynamicList[0].value
        // }
        // if(this.id==6){
        //     this.list=this.brandList //各品牌进展
        //     this.index=this.brandList[0].value
        // }
        this.getCategory()
        this.getArticlelist()
    },
    methods:{
        getBrandIndex(e){
            this.index=e
            this.getArticlelist()
        },
        getCategory(){
            this.$apiRequest.getCategoryBySustainable({pid:this.id}).then(res=>{
                console.log('二级分类',res)
                if(res.code==1){
                    res.data.map(i=>{
                        let obj={
                            text:i.name,
                            value:i.id
                        }
                        this.list.push(obj)
                    })
                    if(this.id==5||this.id==6){
                        this.list.unshift({text:'全部',value:''})
                        this.index=this.list[0].value
                    }
                    
                }
            })
        },
        getArticlelist(){
            let obj={
                category_id:this.id,
                category_child_id:this.index,
                page:this.page
            }
            Toast.loading({
                message: '加载中',
                forbidClick: true,
            })
            this.$apiRequest.getArticlelist(obj).then(res=>{
                console.log('蚊帐列表',res)
                Toast.clear()
                if(res.code==1){
                    // this.articlelist=res.data.data
                    let list=res.data.data
                    if(list.length===0){
                        this.page==1?this.articlelist=[]:''
                        this.page==1?this.finishedTxt='':''
                        this.finished=true
                        return 
                    }
                    if(this.page==1){
                        this.articlelist=list
                        this.finishedTxt=''
                        if(list.length<10){
                            this.finished=true
                        }
                    }else{
                        this.articlelist=this.articlelist.concat(list)
                    }
                }   
            })
        },
        goLink(id){
            this.$router.push({name:'articleDetial',query:{id:id}})
        },
        goPullup(){//上拉
            this.page++
            this.getArticlelist()
        },
    }
}
</script>
<style>
.navInfo .van-dropdown-menu__bar{background-color: #4873c1 !important;}
.navInfo .van-ellipsis{color:#fff}
</style>
<style lang="less" scoped>
.connentSty{
    background-color: rgba(72,115,193,.1);
    .navInfo{
        position: sticky;
        top: 0;
        z-index: 999;
        // .van-dropdown-menu__bar{
        //     border-radius: 0.1rem;
        // }
        .van-dropdown-item{
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 768px;
        }
    }
    .list{
        background-color: #fff;
        width: 90%;
        margin: 0 auto 0.2rem auto ;
        padding: 0.4rem 0.3rem;
        border-radius: 0.06rem;
        img{
            width: 1rem;
        }
        .topF{
            position: absolute;
            top: 0;
            left: 0;
        }
        .flag{
            font-size: 12px;
            background: rgba(147, 173, 239, 0.3);
            padding: 0.02rem 0.2rem;
            border-radius: 0.1rem 0 0.1rem 0;
        }
    }
}
</style>